<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath(); //web项目的根路径
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>R-Watch智能手环</title>


    <link rel="stylesheet" href="<%=basePath%>static/layui2.4.5/css/layui.css">
    <link rel="stylesheet" href="<%=basePath%>static/font-awesome/css/font-awesome.min.css">
    <!--地图插件-->
    <script src="<%=basePath%>static/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://cdn.bootcss.com/proj4js/2.4.3/proj4.js"></script>
    <script src="https://cdn.bootcss.com/proj4leaflet/1.0.1/proj4leaflet.min.js"></script>
    <script type="text/javascript" src='<%=basePath%>static/leaflet/leaflet.ChineseTmsProviders.js'></script>
    <link rel="stylesheet" href="<%=basePath%>static/mouseRightMenu/mouseRightMenu.css" />
    <script src="<%=basePath%>static/leaflet-tileLayer-baidu-master/src/tileLayer.baidu.js"></script>


    <style>
        * { margin: 0; padding: 0; }
        html, body { height: 100%; }
        #mapid { width:100%; height:100%; }
        .input-card{
            z-index: 50;
            display: flex;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: #fff;
            background-clip: border-box;
            border-radius: .25rem;
            width: 8rem;
            border-width: 0;
            border-radius: 0.4rem;
            box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
            position: fixed;
            bottom: 1rem;
            right: 1rem;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0.75rem 1.25rem;
        }
    </style>
</head>
<body class="layui-layout-body">
<c:choose>
    <c:when test="${error}!=null">
        ${error}
    </c:when>
    <c:otherwise>
        <div id="mapid" style="z-index: 10" ></div>
        <div class="input-card">
            <button id="run"  onclick="start()" class="layui-btn">run</button>
            <button id="stop" onclick="stop()" class="layui-btn" style="    margin-left: 0px;">stop</button>
            <button id="pause" onclick="pause()" class="layui-btn" style="    margin-left: 0px;">pause</button>
            <button id="re" onclick="re()" class="layui-btn" style="    margin-left: 0px;">return</button>
            选择时间段
            <input type="text" class="layui-input" id="test1">
            <br>
            到
            <br>
             <input type="text" class="layui-input" id="test2">
            <button  onclick="send()" class="layui-btn" style="    margin-left: 0px;">确定</button>
        </div>
    </c:otherwise>
</c:choose>
<script src="<%=basePath%>static/jquery/jquery.min.js"></script>
<script src="<%=basePath%>static/layui2.4.5/layui.js"></script>
<script>
    /**
     * 为Marker类添加方法
     */
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
        });
        laydate.render({
            elem: '#test2' //指定元素
        });
    });
    (function() {
        // save these original methods before they are overwritten
        var proto_initIcon = L.Marker.prototype._initIcon;
        var proto_setPos = L.Marker.prototype._setPos;

        var oldIE = (L.DomUtil.TRANSFORM === 'msTransform');

        L.Marker.addInitHook(function () {
            var iconOptions = this.options.icon && this.options.icon.options;
            var iconAnchor = iconOptions && this.options.icon.options.iconAnchor;
            if (iconAnchor) {
                iconAnchor = (iconAnchor[0] + 'px ' + iconAnchor[1] + 'px');
            }
            this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center center' ;
            this.options.rotationAngle = this.options.rotationAngle || 0;

            // Ensure marker keeps rotated during dragging
            this.on('drag', function(e) { e.target._applyRotation(); });
        });

        L.Marker.include({
            _initIcon: function() {
                proto_initIcon.call(this);
            },

            _setPos: function (pos) {
                proto_setPos.call(this, pos);
                this._applyRotation();
            },

            _applyRotation: function () {
                if(this.options.rotationAngle) {
                    this._icon.style[L.DomUtil.TRANSFORM+'Origin'] = this.options.rotationOrigin;

                    if(oldIE) {
                        // for IE 9, use the 2D rotation
                        this._icon.style[L.DomUtil.TRANSFORM] = 'rotate(' + this.options.rotationAngle + 'deg)';
                    } else {
                        // for modern browsers, prefer the 3D accelerated version
                        this._icon.style[L.DomUtil.TRANSFORM] += ' rotateZ(' + this.options.rotationAngle + 'deg)';
                    }
                }
            },

            setRotationAngle: function(angle) {
                this.options.rotationAngle = angle;
                this.update();
                return this;
            },

            setRotationOrigin: function(origin) {
                this.options.rotationOrigin = origin;
                this.update();
                return this;
            }
        });
    })();

    /*var map = L.map('mapid', {
      center: [34, 117],
      zoom: 5,
      crs: L.CRS.EPSG3857,
      layers: [
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        })
      ]
    });*/
    var map;
    function baidu_map_init(start_location){

        var map2 = L.map('mapid', {
            crs: L.CRS.Baidu,
            minZoom: 3,
            maxZoom: 18,
            attributionControl: false,
            center: [34, 117],
            zoom: 12
        });


        //控制地图底图
        L.control.layers(
            {
                "百度地图": L.tileLayer.baidu({ layer: 'vec' }).addTo(map2),
                "百度卫星": L.tileLayer.baidu({ layer: 'img' }),
                "百度地图-大字体": L.tileLayer.baidu({ layer: 'vec',bigfont:true }),
                "百度卫星-大字体": L.tileLayer.baidu({ layer: 'img', bigfont: true }),
                "自定义样式-黑色地图": L.tileLayer.baidu({ layer: 'custom', customid:'dark' }),
                "自定义样式-蓝色地图": L.tileLayer.baidu({ layer: 'custom', customid:'midnight' })
            },
            {
                "实时交通信息": L.tileLayer.baidu({ layer: 'time' })
            },
            { position: "topright" }).addTo(map2);

        new L.marker(start_location).addTo(map2);
        return map2;
    }
    var l=${list};
    var latlngs=l;

    map=baidu_map_init(latlngs[0]);
    var marker =  new L.marker(latlngs[0]).addTo(map);

    var _opts = {
        icon: null,
        enableRotation:true //允许小车旋转
    };
    //移动到当前点的索引
    this.i = 0;

    var _path = latlngs;
    var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
    var myIcon = L.icon({
        iconUrl: 'image/timg.jpg',
        iconSize: [24, 24]
    });


    function start(){
        alert(this);
        var me = this,

            len = me._path.length;
        alert(len);
        //不是第一次点击开始,并且小车还没到达终点
        if (me.i && me.i < len - 1) {
            //没按pause再按start不做处理
            if (!me._fromPause) {
                return;
            }else if(!me._fromStop){
                //按了pause按钮,并且再按start，直接移动到下一点
                //并且此过程中，没有按stop按钮
                //防止先stop，再pause，然后连续不停的start的异常
                me._moveNext(++me.i);
            }
        }else {
            //第一次点击开始，或者点了stop之后点开始
            me._addMarker();

            me._moveNext(me.i);
        }
        //重置状态
        this._fromPause = false;
        this._fromStop = false;
    }


    function _addMarker(callback) {
        if (this._marker) {
            this.stop();
            this._marker.remove();
        }
        var marker =new L.Marker(_path[0],{icon: myIcon }).addTo(map)
        this._marker = marker;
    }

    /**
     * 移动到下一个点
     */
    function _moveNext(index) {
        var me = this;
        if (index < this._path.length - 1) {
            this._move(me._path[index], me._path[index + 1], me._tween);
        }
    }

    /**
     * 移动小车
     * @param {Number} poi 当前的步长.
     * @param {Point} initPos 经纬度坐标初始点.
     * @param {Point} targetPos 经纬度坐标目标点.
     * @param {Function} effect 缓动效果，实现插值
     * @return 无返回值.
     */
    function _move(initPos,targetPos,effect) {
        var me = this,
            //当前的帧数
            currentCount = 0,
            //步长
            timer = 10, //10毫秒为一步
            step = 0.1,
            //总步数
            count = Math.round(me._getDistance(initPos[0], initPos[1],targetPos[0],targetPos[1]) / step);

        //如果小于1直接移动到下一点
        if (count < 1) {
            this._moveNext(++me.i);
            return;
        }
        //两点之间匀速移动
        var angle;
        me._intervalFlag = setInterval(function() {
            //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
            if (currentCount >= count) {
                clearInterval(me._intervalFlag);
                //移动的点已经超过总的长度
                if(me.i > me._path.length){
                    return;
                }
                //运行下一个点
                me._moveNext(++me.i);
            }else {
                currentCount++;
                var x = effect(initPos[0], targetPos[0], currentCount, count),
                    y = effect(initPos[1], targetPos[1], currentCount, count);
                var pos =L.latLng(x,y);

                //设置marker
                if(currentCount == 1){
                    if(me._opts.enableRotation == true){
                        //initPos=[lat,lng],leaflet中坐标对的格式为(纬度，经度)，因此要计算角度的话，X对应经度,即initPos[1]
                        angle = me._getAngle(initPos[1], initPos[0],targetPos[1],targetPos[0]);
                    }
                }
                //正在移动
                me._marker.remove();//先删除
                me._marker.setRotationAngle(angle);
                me._marker._latlng = pos;//设置图标位置
                me._marker.addTo(map);
            }
        },timer);
    }

    /**
     * 缓动效果
     * 初始坐标，目标坐标，当前的步长，总的步长
     * @private
     */
    function _tween(initPos, targetPos, currentCount, count) {
        var b = initPos, c = targetPos - initPos, t = currentCount,
            d = count;
        return c * t / d + b;
    }

    /**
     * 计算两点间的距离
     */
    function _getDistance(pxA,pyA, pxB,pyB) {
        return Math.sqrt(Math.pow(pxA - pxB, 2) + Math.pow(pyA - pyB, 2));
    }

    /**
     * 计算角度
     * @param startx
     * @param starty
     * @param endx
     * @param endy
     * @returns {number}
     */
    function _getAngle(startx, starty, endx, endy) {
        var tan = 0
        if (endx == startx) {
            tan = 90;
        } else {
            tan = Math.atan(Math.abs((endy - starty) / (endx - startx))) * 180 / Math.PI;
            console.log(tan);
        }

        if (endx >= startx && endy >= starty)//第一象限
        {
            return -tan;
        } else if (endx > startx && endy < starty)//第四象限
        {
            return tan;
        } else if (endx < startx && endy > starty)//第二象限
        {
            return tan - 180;
        } else {
            return 180 - tan;  //第三象限
        }
    }

    /**
     * 停止
     */
    function stop() {
        this.i = 0;
        this._fromStop = true;
        clearInterval(this._intervalFlag);
    }

    /**
     * 暂停
     */
    function pause() {
        clearInterval(this._intervalFlag);
        //标识是否是按过pause按钮
        this._fromPause = true;
    }
    function re(){

        window.location.herf="<%=basePath%>monitor/device";
        window.history.go(-1);
    }
    function send(){
        var data=[];
        var st= $("#test1").val();
        var et=$("#test2").val();
        data={"id":${id},"stime":st,"etime":et};
        $.ajax({
            type : "post",
            datatype:"json",
            url : "<%=basePath %>monitor/gettrack2",
            data : data,
            success: function(data){
                if(data.success){
                    var ans_list_all=data.body.list
                    latlngs=[];
                    for(var i=ans_list_all.length-1;i>=0;i--)
                    {
                        latlngs.push([ans_list_all[i].latLatitude, ans_list_all[i].lngLongitude])
                    }
                    latlngs=[
                        [34, 117],
                        [32, 118],
                        [36, 127],
                        [35, 116],
                        [32, 115],
                        [31, 120]
                    ];
                }else{
                    layer.alert( data.msg )
                }
            },
            error: function() {
                layer.alert("请检查网络连接");
            }
        });
    }
</script>
</body>


</html>